<#include "${viewPath}/macro/layout.ftl" />
<@layout title="${article.title!}">
<link rel="stylesheet" href="${request.contextPath}/editor.md-1.5.0/css/editormd.min.css">
<div class="page-article">
    <div class="page-header">
        <div class="title">${article.title!}
            <small>
                <div class="btn-group btn-group-xs pull-right">
                    <a href="${ctxPath}/article/editor/${article.id}" class="btn btn-link btn-xs" role="button"><i class="fa fa-pencil"></i>修改</a>
                    <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="btn-warning"><i class="fa fa-map-pin"></i>置顶</a></a></li>
                    </ul>
                </div>
            </small>
        </div>
    </div>
    <div class="header-sub">
        <p>
            <span class="author">作者:<@rober.user userId="${article.createdBy!}"></@rober.user></span>
            <span class="time">${article.createdTime!}</span>
            <span>
                <#list tagNames as tagName>
                    <span class="tag">${tagName}</span>
                </#list>
            </span>
            <span class="summary">${article.summary!}</span>
        </p>
        <p>
            <span class="reading">${article.viewCount!}阅读</span>
            <span class="comment">${article.commentCount!}评论</span>
        </p>
    </div>


    <#--这是文章正文内容-->
    <div class="row">
        <div class="col-md-3">
            <div id="sidebar">
                <h4>目录</h4>
                <div class="markdown-body editormd-preview-container" id="toc-container"></div>
            </div>
        </div>
        <div class="col-md-9" >
            <div id="editormd-view">
                <textarea name="content" id="content" style="display: none">${article.content}</textarea>
            </div>
        </div>
    </div>


    <hr>
    <p>
        <button class="btn comment-tag"><i class="rober rober-star-full store" aria-hidden="true"></i>收藏</button>
        <button class="btn comment-tag"><i class="rober rober-cool2 prise" aria-hidden="true"></i>顶</button>
        <button class="btn comment-tag"><i class="rober rober-evil2 criticize" aria-hidden="true"></i>踩</button>
    </p>

    <div class="article-list-wrapper">
        <div class="col-md-h">
            <div class="article-list-wrapper">
                <div class="article-logo-container">
                    <span style="color: #cc0033" class="rober rober-link"></span>
                </div>
                <div class="article-list-container">
                    <div class="page-header">
                        <h4>关联文章</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1001">Oracle表空间相关操作</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1002">列表搜索器搜索项自定义SQL查询条件是怎么解决的</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1003">在显示模板的Handler处理类中，调整显示模板样式</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-h">
            <div class="article-list-wrapper">
                <div class="article-logo-container">
                    <span style="color: #33cc33" class="rober rober-operation1"></span>
                </div>
                <div class="article-list-container">
                    <div class="page-header">
                        <h4>最新发布</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1001">Oracle表空间相关操作</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1002">列表搜索器搜索项自定义SQL查询条件是怎么解决的</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1003">在显示模板的Handler处理类中，调整显示模板样式</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1006">RaxAnyApp参考指南.pdf</a></li>
                        <li class="list-group-item"><a class="text-primary" href="${request.contextPath}/article/1007">PDF在HTML5插件实现在线查看</a></li>
                    </ul>
                </div>
            </div>

        </div>

    </div>





    <#--<div class="row">-->
        <#--<div class="col-md-12">-->
            <#--<div class="page-header">-->
                <#--<h4>关联文章</h4>-->
            <#--</div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1001">Oracle表空间相关操作</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1002">列表搜索器搜索项自定义SQL查询条件是怎么解决的</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1003">在显示模板的Handler处理类中，调整显示模板样式</a></div>-->
        <#--</div>-->
    <#--</div>-->

    <#--<div class="row">-->
        <#--<div class="col-md-12">-->
            <#--<div class="page-header">-->
                <#--<h4>推荐文章</h4>-->
            <#--</div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1001">Oracle表空间相关操作</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1002">列表搜索器搜索项自定义SQL查询条件是怎么解决的</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1003">在显示模板的Handler处理类中，调整显示模板样式</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1006">RaxAnyApp参考指南.pdf</a></div>-->
            <#--<div class="col-md-6"><a class="text-primary" href="${request.contextPath}/article/1007">PDF在HTML5插件实现在线查看</a></div>-->
        <#--</div>-->
    <#--</div>-->

    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h4>评论(${article.commentCount!})</h4>
            </div>
            <form action="${ctxPath}/article/add-comment/${article.id}" method="post">
                <div class="form-group">
                    <textarea type="text" style="height:150px;" id="content" name="content" class="form-control"></textarea>
                </div>
                <div class="pull-right">
                    <button class="right-block btn btn-success" type="submit">发表评论</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="media-list">
                <#list commentList as comment>
                <li class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <small>1楼 2017/01/22 17:44</small>
                        <p>${comment.content}</p>
                    </div>
                    <div class="media-right">
                        <div style="width:40px;">
                            <span>
                                <a href="${ctxPath}/article/delete-comment/${article.id}/${comment.id}" class="btn btn-link btn-xs" role="button">
                                    <i class="fa fa-trash-o"></i>删除
                                </a>
                            </span>
                        </div>
                    </div>
                </li>
                </#list>
            </ul>
        </div>
    </div>
</div>
</@layout>
<script src="${request.contextPath}/editor.md-1.5.0/lib/marked.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/prettify.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/raphael.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/underscore.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/sequence-diagram.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/flowchart.min.js"></script>
<script src="${request.contextPath}/editor.md-1.5.0/lib/jquery.flowchart.min.js"></script>

<script src="${request.contextPath}/editor.md-1.5.0/editormd.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var editormdView = editormd.markdownToHTML("editormd-view", {
                theme           : 'dark',
                markdown        : $("#content").text(),
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
                //toc             : false,
                tocm            : true,    // Using [TOCM]
                tocContainer    : "#toc-container", // 自定义 ToC 容器层
                //gfm             : false,
                //tocDropdown     : true,
                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                emoji           : true,
                taskList        : true,
                tex             : true,  // 默认不解析
                flowChart       : true,  // 默认不解析
                sequenceDiagram : true,  // 默认不解析
            });
    });


</script>